<template>
  <div>
    <button @click="wife = '高圆圆'">修改</button>
    <p>{{ wife }}</p>
    <p>{{ money }}</p>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <HelloWord
      :mother="wife"
      :obj="obj"
      :money="money"
      @changeMoney="money = $event"
    ></HelloWord>
    <my-panel></my-panel>
    <!-- <hello-word></hello-word> -->
    <!-- 
      $event在原生标签里代表事件对象
      $event在组件里，代表了子传递过来的数据 
    -->
  </div>
</template>


<script>
import HelloWord from "./components/HelloWorld.vue";
import MyPanel from "./components/MyPanel.vue";
export default {
  // methods: {
  //   fn1(num) {
  //     this.money = num;
  //   },
  // },
  components: {
    HelloWord,
    MyPanel,
  },
  data() {
    return {
      money: 500,
      obj: { name: "guo", age: 20 },
      wife: "刘亦菲",
      list: [{ id: 1, name: "guo", age: 20 }],
    };
  },
};
</script>

<style>
body {
  height: 100vh;
  background: linear-gradient(
    45deg,
    rgba(255, 192, 203, 0.8),
    rgba(230, 240, 242, 0.8),
    rgba(230, 219, 211, 0.8)
  );
  /* backdrop-filter: blur(100px); */
}
</style>